<script setup lang="ts">

import router from "@/router";
import { logout } from "@/utils/api";
import { ElMessage } from 'element-plus'

import { ref } from 'vue'
const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const userlogout = () => {
  console.log('logout')
  logout().then((res) => {
    console.log(res);
    if (res.message === '成功') {
      router.push({ path: "/login" })
      ElMessage({
        message: '退出成功.',
        type: 'success',
      })
    }
  })
}
</script>
<template>
  <div style="height: 100%;" class="common-layout">
    <el-container style="height: 100%; ">
      <el-aside style="height: 100%;" width="auto">
        <el-radio-group v-model="isCollapse"
          style="height: 40px; display: flex; align-items: center;justify-content: center;">
          <el-radio-button :value="false">显示</el-radio-button>
          <el-radio-button :value="true">隐藏</el-radio-button>
        </el-radio-group>
        <div style="display: flex;justify-content: center;"><span
            style="color: #40B7FF;align-content: center;">管理系统</span></div>
        <el-menu default-active="/index" router class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
          @close="handleClose">
          <el-menu-item index="/index">
            <el-icon>
              <House />
            </el-icon>
            <template #title>首页</template>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <User></User>
              </el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/Studentlist">学生列表</el-menu-item>
              <el-menu-item index="/Administratorlist">管理员列表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Document />
              </el-icon>
              <span>卷题管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/Testpaperlist">试卷列表</el-menu-item>
              <el-menu-item index="/Topiclist">题目列表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <Edit></Edit>
              </el-icon>
              <span>任务管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/tasklist">任务列表</el-menu-item>
              <el-menu-item index="/Taskcreation">任务创建</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <DataBoard />
              </el-icon>
              <span>教育管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/Subjectlist">学科列表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <el-icon>
                <EditPen></EditPen>
              </el-icon>
              <span>成绩管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/Answersheet">答卷列表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="6">
            <template #title>
              <el-icon>
                <Message></Message>
              </el-icon>
              <span>消息中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/Messagelist">消息列表</el-menu-item>
              <el-menu-item index="/Messagesending">消息发送</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="7">
            <template #title>
              <el-icon>
                <Files />
              </el-icon>
              <span>日志中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/Logcenter">日志中心</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="common-header" style="margin: 0; padding: 0;">Header
          <el-button type="primary" style="float: right; margin: 14px;" @click="userlogout">退出</el-button>
        </el-header>
        <el-main style="margin: 0; padding: 0;">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.common-header {
  border-bottom: 1px solid #dcdfe6;
}
</style>
